<template>
	<com-popup :visible="visible" direction="bottom" @hide="hide">
		<view class="y-flex" :style="{height: bottomPopupHeight + 'px', 'background-color': skinColor.color_bg_2}">
			<text class="fs-30 text-align-center pt-20 pb-20" :style="{color: skinColor.color_1}">选择内置图标</text>
			<list class="y-flex-1">
				<cell v-for="(grid, i) in Math.ceil(list.length / column)" :key="i">
					<com-grid :data="list.slice(i * column, (i + 1) * column)"
					border
					:border-color="skinColor.color_gap_1"
					:gap="0"
					:column="column"
					:count="column">
						<template v-slot="{item, index}">
							<view class="y-flex y-align-center pt-20 pb-20" @tap="iconTap(item)">
								<text class="taobaoIconfont fs-60" :style="{color: skinColor.color_1}">{{String.fromCodePoint(item.unicode_decimal)}}</text>
								<text class="fs-28 mt-10 lines-1" :style="{color: skinColor.color_1}">{{item.name}}</text>
							</view>
						</template>
					</com-grid>
				</cell>
			</list>
		</view>
	</com-popup>
</template>

<script>
	import appMixin from '@/assets/mixin/app.js'
	const iconfonts = require('@/components/com/com-icon/iconfont.json')
	export default {
		mixins: [appMixin],
		data () {
			return {
				visible: false,
				list: [],
				column: 3,
				success: null,
				fail: null
			}
		},
		created() {
			this.list = iconfonts.glyphs
		},
		methods: {
			select ({success, fail}) {
				this.visible = true
				this.success = success
				this.fail = fail
			},
			hide () {
				this.visible = false
				this.success = null
				this.fail = null
			},
			iconTap (item) {
				this.success && this.success(item)
				this.hide()
			}
		}
	}
</script>

<style>
</style>